<template>
  <div class="page">
    <a-card title="使用说明">
      <p>图片预览的功能设计为函数调用的形式，无任何Vue组件。</p>
      <p>
        因为每个项目的UI都不一样，所以框架不提供展示图片的组件，不干涉项目的代码，展示图片的功能自己在项目实现。只需要处理图片点击事件，然后调用图片预览方法即可。可自行二次封装组件，以实现展示+预览的效果。
      </p>
      <hr />
      <p>引入方法</p>
      <code>import { previewImage } from '@/common/utils/PreviewImage'</code>
      <p>同时框架也提供了一个全局方法，任何Vue实例都可以直接调用。</p>
      <code>{ methods:{ _previewImage} }</code>
      <hr />
      previewImage接收三个参数
      <ul>
        <li>
          第一个是图片列表。可以是图片地址组成的数组，也可以是一个包含img标签的dom元素
        </li>
        <li>第二个要预览的图片下标，非必填，默认为0</li>
        <li>第三个是预览组件的配置，非必填</li>
      </ul>

      <hr />
      <p>使用方法见页面源代码。</p>
    </a-card>
    <br />
    <a-card title="传入DOM节点进行预览">
      <img
        v-for="(img, i) of imgs"
        :key="i"
        :src="img"
        @click="preview1(i)"
      />
    </a-card>
    <br />
    <a-card
      title="传入图片数组进行预览"
      ref="imageContainer"
    >
      <img
        v-for="(img, i) of imgs"
        :key="i"
        :src="img"
        @click="preview2(i)"
      />
    </a-card>
    <a-card title="全局调用">
      <img
        v-for="(img, i) of imgs"
        :key="i"
        :src="img"
        @click="preview3(i)"
      />
    </a-card>
  </div>
</template>
<script>
import { previewImage } from '@/common/utils/PreviewImage'
export default {
  data () {
    return {
      imgs: [
        'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg',
        'https://qn.antdv.com/vue.png'
      ]
    }
  },
  methods: {
    /**
     * 传入一个DOM元素，也可以是一个VUE组件
     */
    preview1 (i) {
      previewImage(this.$refs.imageContainer, i)
    },
    /**
     * 传入图片路径组成的数组
     */
    preview2 (i) {
      previewImage(this.imgs, i)
    },
    /**
     * 全局方法调用
     */
    preview3 (i) {
      this._previewImage(this.imgs, i)
    }
  }
}
</script>
<style lang="less" scoped>
ul {
  list-style: disc;
  padding-left: 2em;
}
.page {
  padding: 2em;
  padding-bottom: 20px;
  max-height: 90vh;
  overflow: scroll;
}

img {
  width: 100px;
  height: 100px;
  cursor: pointer;
  border: 3px solid #c6c6c6;
  border-radius: 10px;
  + img {
    margin-left: 1em;
  }
}
</style>
